<!-- 列表中遍历卡片组件 -->
<template>
  <div class="ep-card"
       :class="linked&&'ep-card-linked'"
       @click="handleClick">

    <div class="ep-card-left-icon">
      <img :src="leftIconSrc"
           v-if="leftIconSrc && !$slots['left-icon']" />
      <slot name="left-icon"></slot>
    </div>
    <div class="ep-card-left-wrap">
      <div class="ep-card-title"
           :class="titleClass">
        {{title}}
        <slot name="title"></slot>
      </div>
      <div class="ep-card-content"
           v-if="$slots.content">
        <slot name="content"></slot>
      </div>
    </div>

    <template v-if="(rightDescription || linked ) && !$slots['right-area']">
      <div class="ep-card-right-wrap"
           :style="{color: rdColor}">
        {{rightDescription}}
        <template v-if="linked">
          <van-icon name="arrow" />
        </template>
      </div>
    </template>
    <template v-else-if="$slots['right-area']">
      <slot name="right-area"></slot>
    </template>
  </div>
</template>

<script>
import { computed, ref } from 'vue'
import $router from '@/router'
export default {
  props: {
    // 标题，非必传，默认为空
    title: {
      type: String,
      required: false,
      default: ''
    },
    // 开启超长缩略，默认不开启，可设置n行后省略
    ellipsis: {
      type: String,
      required: false,
      default: 'false'
    },
    // 右侧描述文字
    rightDescription: {
      type: String,
      required: false,
      default: ''
    },
    rdColor: {
      type: String,
      required: false,
      default: '#4073f5'
    },
    linked: {
      type: Boolean,
      required: false,
      default: false
    },
    leftIconSrc: {
      type: String,
      required: false,
    },
    to: {
      type: [Object, String],
      required: false
    }
  },
  setup (props) {
    // 该组件样式集
    const cardClass = ref({
      // 标题样式
      titleClass: '',
      // 左侧内容样式
      contentClass: '',
      // 右侧描述信息样式
      rightDescriptionClass: ''
    })
    const titleClass = computed(() => {
      const ell = props.ellipsis
      if (ell === 'false') return ''
      if (Number(ell).toString === 'NaN') return 'ellipsis'
      if (['1', '2', '3'].indexOf(ell) === -1) {
        console.error('仅支持1|2|3行超长缩略，参数错误')
      }
      return 'ellipsis ellipsis-row' + ell
    })
    // 点击触发事件
    const handleClick = () => {
      if (props.linked && props.to) {
        // 提供链接，且提供了路由名称，则进行路由跳转
        $router.push(props.to)
      }
    }
    return {
      cardClass,
      titleClass,
      handleClick
    }
  }
}
</script>

<style>
/* 列表 */
.ep-card {
  position: relative;
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: space-between;
  align-items: center;
  padding: 9px 15px;
}

.ep-card:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  border-top: 1px solid #ddd;
}

.ep-card-linked:active {
  background: #f2f3f5;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .ep-card:after {
    transform: scaleY(0.5);
    -ms-transform: scaleY(0.5);
    -moz-transform: scaleY(0.5);
    -webkit-transform: scaleY(0.5);
    -o-transform: scaleY(0.5);
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
  .border-box:after {
    transform: scaleY(0.3);
    -ms-transform: scaleY(0.3);
    -moz-transform: scaleY(0.3);
    -webkit-transform: scaleY(0.3);
    -o-transform: scaleY(0.3);
  }
}
.ep-card-title {
  font-size: 14px;
  line-height: 20px;
  font-family: PingFang SC;
  color: #222222;
  min-width: 20vw;
}
/* 缩略 */
.ellipsis {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
}
.ellipsis-row2 {
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.ellipsis-row3 {
  -webkit-line-clamp: 3;
  line-clamp: 3;
}
.ep-card-content {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-content: center;
  padding: 4px 0px 4px 0;
  line-height: 20px;
  font-size: 12px;
  color: #999999;
}

.ep-card-left-wrap {
  flex: 1;
}
.ep-card-right-wrap {
  font-size: 14px;
  min-width: 10vw;
  text-align: right;
  padding-left: 24px;
}

.ep-card-left-icon > img {
  width: 50px;
  padding: 10px;
  height: 50px;
  box-sizing: border-box;
}
</style>
